<script setup lang="ts">
import { onMounted, ref } from "vue"
const txt = ref<any>("");
const list = ref<any[]>([]);

onMounted(() => {

});

const onAdd = () => {
    const regex = /\d+/g;
    const matches = txt.value.match(regex);
    console.log(matches);
    if (matches && matches.length == 4) {
        list.value.push(matches);
    }
}

const getStyle = (ary: number[]) => {
    return {
        left: ary[0] + "px",
        top: ary[1] + "px",
        width: ary[2] + "px",
        height: ary[3] + "px"
    }
}

</script>

<template>
    <div>
        <div class="com">
            <input type="text" class="txt" v-model="txt"><button @click="onAdd">確定</button>
        </div>
        
        <div class="list">
            <div class="item" v-for="item in list" :style="getStyle(item)"></div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.list {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
}

.item {
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    transform: translate(-50%, -50%);
}

.com {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 100vw;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    box-sizing: border-box;
}
.txt{
    padding: 4px;
    flex: 1;
    width: 0;
}
</style>
